<script setup lang="ts" name="CustomDragLayer">
import { useDragLayer } from 'vue3-dnd'
import { storeToRefs } from 'pinia'
import { toRefs } from '@vueuse/core'
import { useLayoutStore } from '@/store/bigScreen/layoutStore'

const layoutStore = useLayoutStore()

const { isNear, currentDragging } = storeToRefs(layoutStore)

const getItemStyles = (initialOffset, currentOffset) => {
  if (!initialOffset || !currentOffset) {
    return {
      display: 'none'
    }
  }
  const { x, y } = currentOffset
  const transform = `translate(${x}px, ${y}px)`
  return {
    transform
  }
}

const collect = useDragLayer(monitor => ({
  item: monitor.getItem(),
  itemType: monitor.getItemType(),
  initialOffset: monitor.getInitialSourceClientOffset(),
  currentOffset: monitor.getSourceClientOffset(),
  isDragging: monitor.isDragging()
}))

const { initialOffset, currentOffset } = toRefs(collect)
</script>

<template>
  <div class="drag-layer">
    <div :style="getItemStyles(initialOffset, currentOffset)">
      <div class="drag-preview">
        <component :is="currentDragging && currentDragging.component" :info="currentDragging" :index="0" :preview="true" :style="{ opacity: isNear ? 0.1 : 1}"></component>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.drag-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.drag-preview{
  display: inline-flex;
}
</style>
